<div class="base-layer-picker">
  <div class="home-button" (click)="initView()"></div>
  <div class="switch-mode-button" (click)="switchMapMode()">{{switchModeButtonText}}</div>
  <div class="picker-container" [ngClass]="{'activated': layerActivated}"
    [ngStyle]="{'width.px': layerActivated ? layerOptions.length * iconSize + 6 : 58}" (mouseover)="layerActivated =
    true" (mouseleave)="layerActivated = false">
    <img src="{{iconPath}}/{{currentLayerModel.icon}}.png" class="layer-icon picked-icon" />
    <img *ngFor="let layer of layerOptions; let i = index" src="{{iconPath}}/{{layer.icon}}.png"
      class="layer-icon option-icon" [ngClass]="{'selected': layer.dataset === currentLayerModel.dataset}"
      [ngStyle]="{'left.px': layerActivated ? i * iconSize : 0}" (click)="setBaseLayer(layer)"
         [nzTooltipTitle]="layer.name" nzTooltipPlacement="bottom" nz-tooltip/>
  </div>
</div>
